<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="注册" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-bg-white dfj-pd-lr-30">
			<view class="dfj-bd-b-e5e">
				<input class="dfj-pd-tb-30" style="width: 100%;" type="number" v-model="regForm.mobilePhone" maxlength="11"
				 placeholder="请输入手机号码" />
			</view>
			<view class="dfj-flex dfj-flex-ai-c dfj-bd-b-e5e">
				<view class="dfj-flex-1"><input class="dfj-pd-tb-30" placeholder="请输入验证码" v-model="regForm.vaildCode" style="width: 100%;"
					 type="number" /></view>
				<view class="dfj-t-base" @click="showCode()">{{ codeTxt }}</view>
			</view>
			<view class="dfj-bd-b-e5e">
				<input class="dfj-pd-tb-30" style="width: 100%;" type="password" v-model="regForm.userPwd" placeholder="请输入密码(密码为6位,由数字组成)" />
			</view>
			<view class="dfj-bd-b-e5e">
				<input class="dfj-pd-tb-30" style="width: 100%;" type="password" v-model="regForm.reuserPwd" placeholder="确认密码(密码为6位,由数字组成)" />
			</view>
			<view class="dfj-bd-b-e5e">
				<input class="dfj-pd-tb-30" style="width: 100%;" type="text" placeholder="请输入您的邀请码" v-model="regForm.sbm" />
			</view>
			<view class="dfj-t-c dfj-pd-t-30 dfj-t-999">
				<checkbox :checked="checked" @click="checkedChange"/> 我的阅读并同意<navigator url="/pages/user/terms" class="dfj-inline-block dfj-t-danger">《注册协议》</navigator>
				<navigator url="/pages/user/terms" class="dfj-inline-block dfj-t-danger">《隐私协议》</navigator>
			</view>
			<view class="dfj-pd-tb-50">
				<button type="primary" @click="register()" style="width: 100%;border-radius: 20rpx;">注册</button>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="dfj-bg-white dfj-pd-20 dfj-bd-radius-20">
				<view class="dfj-t-c dfj-t-333 dfj-pd-tb-20">请输入图形验证码</view>
				<view class="dfj-pd-tb-10"><input v-model="authCode" class="dfj-bg-e5e dfj-pd-10 dfj-bd-radius-10" type="text" placeholder="输入验证码" /></view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-20">
					<view class="dfj-flex-1">
						<image :src="v_code" style="width: 140rpx;height: auto;" mode="widthFix"></image>
					</view>
					<view><text class="dfj-t-999 dfj-f-20" @click="InCode()">看不清？换一张</text></view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-t-c">
					<view class="dfj-flex-1"><button size="mini" @click="hideCode()">取消</button></view>
					<view class="dfj-flex-1"><button type="primary" size="mini" @click="btnCode()">确定</button></view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				regForm: {
					mobilePhone: '',
					userPwd: '',
					reuserPwd: '',
					vaildCode: '',
					sbm: '',
				},
				v_code: '',
				authCode: '',
				isCode: true,
				codeTxt: '获取验证码',
				codeTime: 60,
				checked: false,
			}
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			showCode() {
				var pattern = /^1[345678]\d{9}$/;
				if (!pattern.test(this.regForm.mobilePhone)) {
					uni.showToast({
						title: '手机号有误',
						icon: 'none'
					})
					setTimeout(() => {
						uni.hideToast()
					}, 1500)
				} else {
					this.v_code = `${this.$store.state.url}/servlet/validateCodeServlet?mobilePhoneCode=${this.regForm.mobilePhone}&rnd=${Math.random()}`
					this.$refs.popup.open()
				}
			},
			InCode() {
				this.authCode = ''
				this.v_code = `${this.$store.state.url}/servlet/validateCodeServlet?mobilePhoneCode=${this.regForm.mobilePhone}&rnd=${Math.random()}`
			},
			hideCode() {
				this.$refs.popup.close()
			},
			btnCode() {
				this.getCode()
			},
			getCode() {
				if (this.isCode) {
					this.$http({
						url: '/sys/getRegCodeByPhone',
						data: {
							mobilePhone: this.regForm.mobilePhone,
							vaildCode: this.authCode
						},
						method: 'POST'
					}).then(res=> {
						if (res.flag) {
							this.isCode = false
							this.authCode = ''
							this.$refs.popup.close()
							let c_time = setInterval(() => {
								this.codeTime = this.codeTime - 1
								this.codeTxt = `${this.codeTime}s`
								if (this.codeTime <= 0) {
									this.codeTxt = '重新获取'
									this.isCode = true
									clearInterval(c_time)
								}
							}, 1000)
						}
					})
				}
			},
			checkedChange(e){
				this.checked = !this.checked
			},
			register() {
				var pattern = /^1[345678]\d{9}$/;
				if (!pattern.test(this.regForm.mobilePhone)) {
					uni.showToast({
						title: '手机号有误',
						icon: 'none'
					})
					setTimeout(() => {
						uni.hideToast()
					}, 1500)
					return false
				}
				if(this.regForm.vaildCode == ''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					setTimeout(() => {
						uni.hideToast()
					}, 1500)
					return false
				}
				if(this.regForm.userPwd != this.regForm.reuserPwd){
					uni.showToast({
						title: '两次输入密码不一致',
						icon: 'none'
					})
					setTimeout(() => {
						uni.hideToast()
					}, 1500)
					return false
				}
				if(!this.checked){
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					setTimeout(() => {
						uni.hideToast()
					}, 1500)
					return false
				}
				this.$http({
					url: '/sys/regUser',
					data: this.regForm,
				}).then(res=> {
					if(res.flag){
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.hideToast()
						}, 1500)
						uni.reLaunch({
							url: '/pages/user/login'
						})
					}
				})
			}
		}
	}
</script>

<style>
</style>
